<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="角色名称">
      <el-input
        v-model="formInline.rolesName"
        placeholder="请输入角色名称"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="getData">搜索</el-button>
      <el-button type="danger" @click="dialogFormVisible = true">
        新增角色
      </el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="rolesName" label="角色名称" align="center" />
    <el-table-column prop="rolesDesc" label="角色描述" align="center" />
    <el-table-column label="操作" align="center">
      <template #default>
        <el-button link type="primary">查看</el-button>
        <el-button link type="primary">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="total,slot, prev, pager, next"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
        ，当前{{ formInline.pageIndex }}/{{formInline.pageCount}}页，每页显示{{formInline.pageSize}}条
        <el-button class="btn-prev" link @click="handleCurrentChange(1)" :disabled="formInline.pageIndex==1">首页</el-button>
      </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="slot, sizes,jumper"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
        <el-button class="btn-prev" link @click="handleCurrentChange(formInline.pageCount)" :disabled="formInline.pageIndex==formInline.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>

  <!-- 新增角色弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="新增角色" width="500">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <el-form-item label="名称" prop="rolesName" :label-width="formLabelWidth">
        <el-input
          v-model="form.rolesName"
          placeholder="请输入名称"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="备注" prop="rolesDesc" :label-width="formLabelWidth">
        <el-input v-model="form.rolesDesc" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import axios from "axios";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  rolesId: "",
  rolesName: "",
  rolesDesc: "",
  isDel: false,
});
//验证
const rules = reactive<FormRules>({
  rolesName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  rolesDesc: [{ required: true, message: "请输入备注", trigger: "blur" }],
});
const ruleFormRef = ref<FormInstance>();
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      axios
    .post(apiUrl+"/api/Roles/AddRoles", form)
    .then((res) => {
      console.log(res.data);
     if(res.data.code==0){
      ElMessage.success('添加成功')
     }
     else{
      ElMessage.error('添加失败')
     }
    });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//角色名字查询
const formInline = reactive({
  rolesName: "",
  pageIndex:1,
  pageSize:3,
  totalCount:0,
  pageCount:0,

});

const tableData = ref([]);
//角色显示
const getData = () => {
  axios
    .post(apiUrl+"/api/Roles/SearchRoles", {
      rolesName: formInline.rolesName,
      pageIndex: formInline.pageIndex,
      pageSize: formInline.pageSize
    })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data.list;
      formInline.pageCount=res.data.data.pageCount;
      formInline.totalCount=res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  formInline.pageSize=val
  getData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  formInline.pageIndex=val
  getData();
}
//生命周期钩子
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
